<!-- Team 4 - Gold Coast -->
<!-- Duy Kha Nguyen 598240  -->
<!-- Rongkai Zhou 562946  -->
<!-- Zhangyue Cheng 548692 -->
<!-- Binzan Liang 591911 -->
<!-- Wei Liu 572322 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="jquery/jquery.jqplot.min.css" />
<style type="text/css">
</style>

<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jquery/excanvas.min.js"></script>
<script type="text/javascript" src="jquery/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="jquery/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jquery/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jquery/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="jquery/plugins/jqplot.enhancedLegendRenderer.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<title>Tweets Analytics</title>

<script type="text/javascript">
	var server = "http://115.146.95.28:5984";
	var map = null;
	var markers = [];
	$(document).ready(function() {
		var goldCoast = new google.maps.LatLng(-28.016667, 153.4);
		var mapOptions = {
		    zoom: 13,
		    center: goldCoast,
		    mapTypeId: google.maps.MapTypeId.TERRAIN
		  };
		map = new google.maps.Map(document.getElementById("userTrackingMapCanvas"),mapOptions);
		
		tweetCountByLanguageChart();
		
		tweetCountByHourChart();
		
		trackUser();
		
		topPlaceChart();
		
		topClientChart();
	});
	
	function tweetCountByLanguageChart() {
		$.getJSON(
				server + "/db-tweet-final/_design/TweetAnalytics/_view/TweetCountByLanguage?callback=?", 
				{group: true}, 
				function(response) {
					var formattedData = new Array();
					$.each(response.rows, function(index, item) {
						formattedData.push(new Array(item.key, item.value));
					});
					
					$.jqplot('tweetCountByLanguageChartDiv', [ formattedData ], {
						seriesDefaults : {
							renderer : jQuery.jqplot.PieRenderer,
							rendererOptions : {
								showDataLabels : true
							}
						},
						legend:{
						    renderer: $.jqplot.EnhancedLegendRenderer,
						    show: true,
						    rendererOptions: {
						        numberRows: null,
						        numberColumns : 10
						    }
						}
					});
	    		}
		);
	}
	
	function tweetCountByHourChart() {
		$.getJSON(
				server + "/db-tweet-final/_design/TweetAnalytics/_view/TweetCountByHour?callback=?", 
				{group: true}, 
				function(response) {
					var formattedData = new Array();
					formattedData.tweetCounts = new Array();
					formattedData.hours = new Array();
					$.each(response.rows, function(index, item) {
						formattedData.hours.push(item.key);
						formattedData.tweetCounts.push(item.value);
					});
					
					$.jqplot("tweetCountByHourChartDiv", [formattedData.tweetCounts], {
			            animate: !$.jqplot.use_excanvas,
			            seriesDefaults:{
			                renderer:$.jqplot.BarRenderer,
			                pointLabels: { show: true }
			            },
			            axes: {
			                xaxis: {
			                    renderer: $.jqplot.CategoryAxisRenderer,
			                    ticks: formattedData.hours
			                }
			            },
			            highlighter: { show: false }
			        });
	    		}
		);
	}
	
	function trackUser() {
		$.getJSON(
				server + "/db-tweet-final/_design/TweetAnalytics/_list/SortUserByCount/TweetByUser?callback=?", 
				{group: true}, 
				function(response) {
					var table = $("<table border='1'><tr><th>User</th><th>Tweet count</th></tr></table>");
					var topUsers = null;
					if (response.length < 5) {
						topUsers = response;
					} else {
						topUsers = response.slice(0, 5);
					}
					$.each(topUsers, function(index, user) {
						var row = $("<tr></tr>");
						$("<td></td>").html(user.user).appendTo(row);
						$("<td></td>").html(user.count).appendTo(row);
						
						var trackUserButton = $("<button>Track</button>");
						trackUserButton.attr("data-userid", user.userid).button().on("click", function(event) {
							for (var i = 0; i < markers.length; i++) {
							    markers[i].setMap(null);
							}
							markers = [];
							
							$.getJSON(
									server + "/db-tweet-final/_design/TweetAnalytics/_view/TweetCoordByUser?callback=?", 
									{key: JSON.stringify([$(this).attr("data-userid")])}, 
									function(response) {
										$.each(response.rows, function(index, item) {
											var marker = new google.maps.Marker({
												position: new google.maps.LatLng(item.value.coordinates[0], item.value.coordinates[1]),
												map: map
											});
											markers.push(marker);
										});
						    		}
							);
						});
						$("<td></td>").html(trackUserButton).appendTo(row);
						
						row.appendTo(table);
					});
					table.appendTo($("#topUserTrackingDiv"));
	    		}
		);
	}
	
	function topPlaceChart() {
		$.getJSON(
				server + "/db-tweet-final/_design/TweetAnalytics/_list/SortPlaceByCount/TweetCountByPlace?callback=?", 
				{group: true}, 
				function(response) {
					var formattedData = new Array();
					formattedData.tweetCounts = new Array();
					formattedData.places = new Array();
					$.each(response, function(index, item) {
						formattedData.places.push(item.place);
						formattedData.tweetCounts.push(item.count);
					});
					
					$.jqplot("topPlaceChartDiv", [formattedData.tweetCounts], {
			            animate: !$.jqplot.use_excanvas,
			            seriesDefaults:{
			                renderer:$.jqplot.BarRenderer,
			                pointLabels: { show: true }
			            },
			            axes: {
			                xaxis: {
			                    renderer: $.jqplot.CategoryAxisRenderer,
			                    ticks: formattedData.places
			                }
			            },
			            highlighter: { show: false }
			        });
	    		}
		);
	}
	
	function topClientChart() {
		$.getJSON(
				server + "/db-tweet-final/_design/TweetAnalytics/_list/SortSourceByCount/TweetCountBySource?callback=?", 
				{group: true}, 
				function(response) {
					var formattedData = new Array();
					formattedData.tweetCounts = new Array();
					formattedData.clients = new Array();
					$.each(response, function(index, item) {
						formattedData.clients.push(item.source);
						formattedData.tweetCounts.push(item.count);
					});
					
					$.jqplot("topClientChartDiv", [formattedData.tweetCounts], {
			            animate: !$.jqplot.use_excanvas,
			            seriesDefaults:{
			                renderer:$.jqplot.BarRenderer,
			                pointLabels: { show: true }
			            },
			            axes: {
			                xaxis: {
			                    renderer: $.jqplot.CategoryAxisRenderer,
			                    ticks: formattedData.clients
			                }
			            },
			            highlighter: { show: false }
			        });
	    		}
		);
	}
</script>

</head>
<body>
	<h3>Languages tweeted in Gold Coast</h3>
	<div id="tweetCountByLanguageChartDiv" style="height: 600px; width: 800px;"></div>

	<h3>Tweet counts by hours</h3>
	<div id="tweetCountByHourChartDiv" style="height: 600px; width: 800px;"></div>
	
	<h3>Top users tracking</h3>
	<div id="topUserTrackingDiv"></div>
	<div id="userTrackingMapCanvas" style="height: 600px; width: 800px;"></div>
	
	<h3>Most popular places</h3>
	<div id="topPlaceChartDiv" style="height: 600px; width: 100%;"></div>
	
	<h3>Most popular clients</h3>
	<div id="topClientChartDiv" style="height: 600px; width: 100%;"></div>
</body>
</html>